<template>
	<view class="paypage">
		<delivery-layout></delivery-layout>
		<view class="goodsList">
			<goods-list></goods-list>
		</view>
		<view class="paytype"> 
			<view class="box" :class="item.value==payDefValue?'active':''" v-for="item in payType" @click="payBtn(item.value)">
				<u-icon 
				:name="item.icon" 
				class="icon" 
				size="26" 
				:color="item.color"
				></u-icon>
				<text class="font">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				// #ifdef APP-PLUS || H5
				payDefValue:"alipay",
				// #endif
				
				// #ifdef MP-WEIXIN
				payDefValue:'wxpay',
				// #endif
				
				payType:[{
					name:"支付宝",
					value:"alipay",
					color:"#1578FF",
					icon:"zhifubao"
				},{
					name:"微信",
					value:"wxpay",
					color:"#04C15F",
					icon:"weixin-fill"
				}]
			};
		},
		methods:{
			payBtn(value){
				this.payDefValue=value
			}
		}
	}
</script>

<style lang="scss">
	page{ background: $page-bg-color;}
	.paypage{ padding: 30rpx;
		.goodsList{margin-top: 30rpx;}
		.paytype{
			@include flex-box-set(between); gap: 10px;
			.box{ flex-grow: 1; padding: 10rpx 10rpx; height: 75rpx; border-radius: 10rpx; gap: 10rpx; border: 1px solid #fff;
				@include flex-box-set(); 
				background: #fff;
				&:first-child.active{ border-color: #1578ff; color: #1578ff;}
				&:last-child.active{ border-color: #04C15F; color: #04C15F;}
			}
		}
	}
</style>
